<template>
  <div class="ellipsis-box">
    <div v-if="!isExpanded" v-html="fullText" class="ellipsis"></div>
    <div v-else v-html="fullText" style="white-space: pre-wrap;"></div>
    <van-button v-show="fullText.length > 105" type="primary" @click="toggle" size="mini" style="margin: 10px 10px 0px 0px">{{ isExpanded ? '收起' : '展开' }}</van-button>
  </div>
</template>

<script setup>
import {ref, watch} from 'vue'

let props = defineProps(["text"]);
const isExpanded = ref(false)
let fullText = props.text
function toggle() {
  isExpanded.value = !isExpanded.value
}

</script>

<style scoped>
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  white-space: pre-wrap;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
a{
  color: #1989fa;
}

.van-button--primary {
  color: var(--van-button-primary-color);
  background: #107459;
  border: var(--van-button-border-width) solid var(--van-button-primary-border-color);
}
</style>
